<template>
	<div class="body_inner">

		<main class="main">
			<div class="header">
				<a href="/main" class="logo"><img src="../assets/img/icon/logo.png" alt=""></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="accountMenu">
				<div class="info">
					<div class="left">
						<img src="../assets/img/icon/m_master.png" alt="" v-if="is_master == 1">
						<p class="name">{{indeData.user_no}}</p>
						<p class="name" id="copyText" style="position: absolute;z-index: -1;opacity: 0;">{{'https://test.pdt-daily.com/join?referno=' + indeData.user_no}}</p>
					</div>

					<div class="right">
						<button type="button" class="copy" data-clipboard-target="#copyText"><i
								class="xi-documents-o"></i></button>
						<button type="button" class="open_modal" @click="addAcount()"><i class="xi-plus"></i></button>
						<button type="button" class="open_modal_2" @click="allAccount = !allAccount"><i
								class="xi-caret-down-min"></i></button>
					</div>
				</div>

				<div id="accountPlus" v-if="allAccount">
					<ul>
						<li v-for="(value,index) in accountList" :key="index"><a>{{value.user_no}} <i class="xi-repeat"
									@click="swichAccount(index)"></i></a></li>
					</ul>

					<button type="button" class="open_modal"><i class="xi-plus" @click="addAcount()"></i>계정 추가</button>
				</div>

				<div class="contents">
					<div class="refresh" @click="getInfo()"><i class="xi-refresh"></i></div>

					<div class="img"><img src="../assets/img/icon/coin_symbol.png" alt=""></div>
					<p class="title"><b>${{info.self_buy_price}}</b></p>

					<div class="rate">
						<h3>
							<p>총 획득 데일리수익 ({{info.buy_num}}회차)</p>
							<b>{{info.now_reward_pdt}}</b> PDT 
							<!-- (${{info.now_reward}}) -->
						</h3>

						<div class="percent">
							<p>0%</p>
							<p class="bar" v-if="Number(info.proportion) <= 1">
								<span :style="{'width':info.proportion * 100 + '%',}"></span>
								<span class="number" :style="{'left':info.proportion * 100 + '%'}">
									<img src="../assets/img/icon/percent.png" alt="">
									<br>{{info.now_proportion}}%
								</span>
							</p>
							<p class="bar" v-else style="background: #17ceab;">
								<span :style="{'width':(Number(info.proportion) - 1) * 100 + '%',}"
									style="background: #FD4444;"></span>
								<span class="number" :style="{'left':(Number(info.proportion) - 1) * 100 + '%'}"
									style="color: #FD4444;">
									<img src="../assets/img/icon/percentred.png" alt="">
									<br>{{info.now_proportion}}%
								</span>
							</p>
							<p>{{info.max_proportion}}%</p>
						</div>

						<div class="balance">
							<p>잔액</p>
							<b>{{info.now_usdt_pdt}}<span>PDT</span></b>
							<!-- (${{info.now_usdt}}) -->
						</div>
					</div>
				</div>
			</div>

			<div class="pdt">
				<h4>PDT 시세</h4>
				<div class="graph_box">
					<div id="main" style="width: 100%;height:32rem;"></div>
				</div>
			</div>


		</main>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>

		<div id="recommenderModal" class="modal" v-if="showModel">
			<div class="modal_body">
				<h3>추가계정 <span>{{next_account}}</span> 을(를) <br>추가 하시겠습니까?</h3>

				<button class="btn finish_btn" @click="creatAccount()">추가</button>
				<button type="button" class="btn close_btn" @click="showModel = false">닫기</button>
			</div>
		</div>

	</div>
</template>
<script>
	import axios from "axios";
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				showModel: false,
				indeData: {},
				is_master: null,
				accountList: [],
				next_account: '',
				allAccount: false,
				info: {
					is_master: null,
					max_proportion: null,
					next_account: "",
					now_proportion: 0,
					now_reward: "",
					now_reward_pdt: "",
					now_usdt: "",
					now_usdt_pdt: "",
					pdt: "",
					self_buy_price: "",
				},
				option: {
					color: ['#5470c6', '#91cc75'],
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: [],
						axisLabel: {
							formatter: function(value) {
								var ret = ""; //拼接加\n返回的类目项
								var max = 8; //每行显示的文字字数
								var val = value.length; //X轴内容的文字字数
								var rowN = Math.ceil(val / max); //需要换的行数
								if (rowN > 1) {
									for (var i = 0; i < rowN; i++) {
										var temp = "", //每次截取的字符串
											start = i * max; //开始截取的位置
										var end = start + max; //结束截取的位置
										temp = value.substring(start, end) + "\n";
										ret += temp; //最终的字符串
									}
									return ret;
								} else {
									return value
								}
							}
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'line',
						symbol: 'none',
						itemStyle: {
							color: '#17CEAB' // 设置线条颜色为红色
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(0, 216, 135, 0.4)' // 渐变起始颜色
							}, {
								offset: 1,
								color: 'rgba(0, 216, 135, 0)' // 渐变结束颜色
							}])
						}
					}],
					grid: {
						x: 45,
						y: 15,
						x2: 20,
						y2: 40
					},
				},
				allMenuShow:false
			};
		},
		created() {

		},
		mounted() {
			this.getInfo();

		},
		methods: {
			// 添加账户
			addAcount() {
				if (!this.next_account) {
					alert('현재 계정을 만들 수 없습니다.')
					return;
				}
				if (this.next_account == 1) {
					alert('구매 금액 부족')
					return;
				}
				this.showModel = true;
			},
			// 切换账号
			swichAccount(index) {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/change_account', {
					user_id: _this.accountList[index].user_id
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.allAccount = false;
						localStorage.setItem('token', response.data.data.token);
						_this.getInfo();
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			creatAccount() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/add_account', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.showModel = false;
						_this.getInfo();
					}
					if (response.data.status == 306) {
						alert(response.data.message);
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			getInfo() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/index/index', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						_this.info = response.data.data.data;
						_this.accountList = response.data.data.list;
						_this.next_account = response.data.data.data.next_account;
						_this.is_master = response.data.data.data.is_master;
						_this.indeData = response.data.data.user_info;
						_this.option.xAxis.data = response.data.data.pdt.date;
						_this.option.series[0].data = response.data.data.pdt.price;
						
						if(response.data.data.data.buy_message != null){
							alert(response.data.data.data.buy_message);
						}
						_this.myEcharts();
					}
					if (response.data.status == 401) {
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			myEcharts() {
				var myChart = echarts.init(document.getElementById('main'));
				myChart.setOption(this.option);
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>